<template>
    <!-- 摄像头图层面板 -->
    <CameraLayerPanel
        v-if="controlState.showLayerPanel"
        :default-tab="controlState.defaultTab"
        :check-mode="controlState.checkMode"
        :default-checked-keys="controlState.defaultCheckedKeys"
        @click-point="onClickPoint"
        @clear-pop="onCloseCamearPop"
    />
    <!-- 摄像头-查看普通弹窗 -->
    <CameraCommonPop
        v-if="controlState.showCamearCommonPop"
        :info="controlState.cameraInfo"
        @close="onCloseCamearPop"
    />
    <!-- 一个点位多个摄像头 -->
    <CameraRepeatPop
        v-if="controlState.showCamearRepeatPop"
        :info="controlState.cameraInfo"
        @close="onCloseCamearPop"
    />
</template>

<script setup lang="ts">
import CameraLayerPanel from './CameraLayerPanel.vue'
import CameraCommonPop from './CameraCommonPop.vue'
import CameraRepeatPop from './CameraRepeatPop.vue'

const controlState = reactive({
    /**
     * 图层面板相关
     */
    showLayerPanel: false, // 是否展示图层面板
    defaultTab: 'space', // 图层面板默认的选择分组
    checkMode: 'ALL' as 'ALL' | 'CUSTOM', // 勾选行为
    defaultCheckedKeys: [] as any[], // 默认选中

    /**
     * 摄像头查看
     */
    showCamearCommonPop: false,

    /**
     * 重复摄像头
     */
    showCamearRepeatPop: false,

    // 摄像头相关信息
    cameraInfo: null,
})

// 点击了摄像头点位
const onClickPoint = (info: any) => {
    controlState.cameraInfo = info
    if (info.isRepeat) {
        controlState.showCamearRepeatPop = true
    } else {
        controlState.showCamearCommonPop = true
    }
}

const onCloseCamearPop = () => {
    controlState.showCamearCommonPop = false
    controlState.showCamearRepeatPop = false
    controlState.cameraInfo = null
}

/**
 * 对外暴露方法
 */
const openLayerPanelFn = (options: any) => {
    controlState.showLayerPanel = true
    if (options) {
        controlState.defaultTab = options.defaultTab ?? 'space'
        controlState.checkMode = options.checkMode ?? 'ALL'
        controlState.defaultCheckedKeys = options.defaultCheckedKeys ?? []
    }
}

const closeLayerPanelFn = () => {
    controlState.showLayerPanel = false
    controlState.showCamearCommonPop = false
    controlState.showCamearRepeatPop = false
    controlState.checkMode = 'ALL'
    controlState.defaultCheckedKeys = []
    controlState.defaultTab = 'space'
}
// 对外暴露摄像头相关方法
window.cameraTools = {
    // 打开图层面板
    openLayerPanel: openLayerPanelFn,
    // 关闭图层面板
    closeLayerPanel: closeLayerPanelFn,
    // 关闭所有
    closeAll: closeLayerPanelFn,
}
</script>
